<template>
  <div class="header">
    <div class="page-title" style="margin-bottom:20px;">系统设置</div>
     <el-tabs v-model="activeTabName" @tab-click="handleClick">
        <el-tab-pane label="套餐管理" name="first">
            <el-form ref="form"  label-width="80px">
                <el-form-item :label="'套餐'+(key+1)" :key="key" v-for="(item,key) in packages">
                    <el-input @change="changePrice(key, 1)" v-model="item.price" style="margin-right:10px;width:60px"></el-input>元，赠送 <el-input @change="changePrice(key, 2)" style="margin:0 10px;width:60px" v-model="item.send_price"></el-input>元
                    <i class="el-icon-delete" style="margin-left:10px;color:#f00;cursor:pointer" @click="deletePackage(item.id)"></i>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="addPackage">增加</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        <el-tab-pane label="其它设置" name="second">
            <el-form ref="form" label-width="80px">

              <el-form-item label="客服电话" >
                <el-input
                  v-model="kf_phone"
                  autocomplete="off"
                  placeholder="请输入客服电话"
                ></el-input>
              </el-form-item>

              <el-form-item label="洗车教程" >
                  <Editor id="car_wash_tutorial" :value="car_wash_tutorial"  @change="changeEditor1"></Editor>
              </el-form-item>

              <el-form-item label="服务协议"  >
                  <Editor id="server_proto" :value="server_proto" @change="changeEditor2"></Editor>
              </el-form-item>

              <el-form-item label="关于我们" >
                  <Editor id="about" :value="about"  @change="changeEditor3"></Editor>
              </el-form-item>

              <el-form-item label="用户协议" >
                  <Editor id="user_protol" :value="user_protol"  @change="changeEditor4"></Editor>
              </el-form-item>

              <el-form-item label="充值协议" >
                  <Editor id="recharge_protol" :value="recharge_protol"  @change="changeEditor5"></Editor>
              </el-form-item>
              
              <el-form-item label="">
                  <el-button type="primary" @click="updateContent">修改</el-button>
              </el-form-item>

            </el-form>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { request_package_list, request_package_create, request_package_update, request_package_delete,request_content_get,request_content_update } from "@/util/api";
import Editor from "@/components/Editor"
export default {
  name: "SeekType",
  data() {
    return {
      form: [],
      activeTabName: 'first',
      packages:[],
      car_wash_tutorial:'',
      server_proto:'',
      about:'',
      kf_phone: '',
      recharge_protol:'',
      user_protol: ''
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  components: {
    Editor
  },
  methods: {
    init() {
      this.getPackageList()
    },
    changeEditor1(val) {
        this.car_wash_tutorial = val
    },
    changeEditor2(val) {
        this.server_proto = val
    },
    changeEditor3(val) {
        this.about = val
    },
    changeEditor4(val) {
        this.user_protol = val
    },
    changeEditor5(val) {
        this.recharge_protol = val
    },
    // 更新富文本
    updateContent() {
      request_content_update({
        car_wash_tutorial:this.car_wash_tutorial,
        server_proto:this.server_proto,
        about:this.about,
        kf_phone:this.kf_phone,
        user_protol:this.user_protol,
        recharge_protol:this.recharge_protol
      }).then(() => {
          this.$message.success({
            message: "操作成功！",
            offset: 70,
          });
      })
    },
    // 获取套餐列表
    getPackageList() {
        request_package_list()
          .then((res) => {
            const result = res.data;
            if (result.code == 200) {
              this.packages = result.data.data;
            }
          })
        request_content_get()
          .then((res) => {
            const result = res.data;
            if (result.code == 200) {
              this.car_wash_tutorial = result.data.car_wash_tutorial;
              this.server_proto = result.data.server_proto;
              this.about = result.data.about;
              this.kf_phone = result.data.kf_phone
              this.user_protol = result.data.user_protol;
              this.recharge_protol = result.data.recharge_protol
            }
          })
    },
    // 增加套餐
    addPackage() {
      let [defaultPrice, defaultSendPrice] = [1, 0];
      request_package_create({
        price:defaultPrice,
        send_price:defaultSendPrice
      }).then((res) => {
        this.packages.push({price:defaultPrice,send_price:defaultSendPrice,id:res.data.data.id})
      })
    },
    changePrice(key) {
      let [id, price, send_price] = [this.packages[key].id, this.packages[key].price, this.packages[key].send_price]
      request_package_update({id,price,send_price});
    },
    // 删除
    deletePackage(id) {
      this.$confirm("此操作将永久删除，是否继续？", "系统提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          request_package_delete({
            id: id,
          })
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.$message.success({
                  message: "删除成功！",
                  offset: 70,
                });
                this.getPackageList()
              } else {
                this.$message.error({
                  message: result.message,
                  offset: 70,
                });
              }
            })
            .catch();
        })
    },
  },
};
</script>

<style scoped  lang="less">
</style>